<template>
  <div class="wealth">
    <wealth-top-bar :status="showTopBar" @wealth-change="wealthChange"></wealth-top-bar>
    <div class="wealth-body">
      <wealth-le-purse v-if="showTopBar == 'left'"></wealth-le-purse>
      <wealth-le-shell v-if="showTopBar == 'right'"></wealth-le-shell>
    </div>
    <bottom-nav-bar></bottom-nav-bar>
  </div>
</template>

<script>
import WealthTopBar from "~/components/WealthTopBar.vue";
import WealthLePurse from "~/components/WealthLePurse.vue";
import WealthLeShell from "~/components/WealthLeShell.vue";
import BottomNavBar from "~/components/BottomNavBar.vue";

export default {
  components: {
    WealthTopBar,
    WealthLePurse,
    WealthLeShell,
    BottomNavBar
  },
  data() {
    return {
      tab: 1 //默认 1 表示了钱包，2 表示乐贝
    };
  },
  computed: {
    showTopBar() {
      return this.$store.state.wealth.status;
    }
  },
  mounted() {
    this.tab = this.$route.query.tab;
    if (this.tab == 1 || this.tab == 2) {
      this.wealthChange(this.tab);
    }
  },
  methods: {
    wealthChange(e) {
      this.$store.commit("wealth/SET_WEALTH_STATUS", e);
    }
  }
};
</script>

<style scoped>
.wealth {
  overflow: hidden;
  background-color: #2086f9;
}
.wealth-body {
  background-color: #fff;
}
</style>
